{extend name="base" /}
{block name="body"}
<div class="layui-card">
    <div class="layui-card-body">
        <blockquote class="layui-elem-quote layui-text">
            订单统计说明：<span class="text-danger"></span><span class="text-danger"></span>
        </blockquote>
        <div id="container" style="width: 80%;height:600px;"></div>
    </div>
</div>
{/block}
{block name="js"}
{js href="__JS__/echarts.min.js,__JS__/wonderland.js" /}
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'), 'wonderland');
    myChart.setOption({
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            data: ['西北', '西南', '华北', '华东', '华南', '东北', '华中', '港澳台']
        },
        series: [
            {
                name: '订单来源',
                type: 'pie',
                selectedMode: 'single',
                radius: [0, '30%'],
                label: {
                    position: 'inner',
                    fontSize: 14,
                },
                labelLine: {
                    show: false
                },
                data: [
                    {value: 1548, name: '西北', selected: true},
                    {value: 75, name: '西南'},
                    {value: 275, name: '华北'},
                    {value: 675, name: '华东'},
                    {value: 475, name: '华南'},
                    {value: 975, name: '东北'},
                    {value: 175, name: '华中'},
                    {value: 679, name: '港澳台'}
                ]
            },
            {
                name: '订单来源',
                type: 'pie',
                radius: ['40%', '60%'],
                labelLine: {
                    length: 30,
                },
                label: {
                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                    backgroundColor: '#F6F8FC',
                    borderColor: '#8C8D8E',
                    borderWidth: 1,
                    borderRadius: 4,

                    rich: {
                        a: {
                            color: '#6E7079',
                            lineHeight: 22,
                            align: 'center'
                        },
                        hr: {
                            borderColor: '#8C8D8E',
                            width: '100%',
                            borderWidth: 1,
                            height: 0
                        },
                        b: {
                            color: '#4C5058',
                            fontSize: 14,
                            fontWeight: 'bold',
                            lineHeight: 33
                        },
                        per: {
                            color: '#fff',
                            backgroundColor: '#4C5058',
                            padding: [3, 4],
                            borderRadius: 4
                        }
                    }
                },
                data: [
                    {value: 1048, name: '深圳'},
                    {value: 335, name: '上海'},
                    {value: 310, name: '北京'},
                    {value: 251, name: '浙江'},
                    {value: 234, name: '河南'},
                    {value: 147, name: '重庆'},
                    {value: 135, name: '陕西'},
                    {value: 102, name: '贵州'}
                ]
            }
        ]
    });
</script>
{/block}